<template>
  <div class="app-container">
    <el-input
      v-model="filterText"
      placeholder="请输入你要搜索的课程分类"
      style="margin-bottom: 30px"
    />
    <el-tree
      ref="tree2"
      :data="dataAll"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />
     <el-button type="primary" @click='exportSubject'>导出</el-button>
  </div>
</template>

<script>
import subject from "@/api/subject/subject";
export default {
  data() {
    return {
      filterText: "",
      dataAll: [], //返回所有分类数据
      defaultProps: {
        children: "children",  //2级分类列表
        label: "title",  //后端实体类的title名称
      },
    };
  },
  created() {
    this.getAllSubjectList();
  },
  //监听tree2的变化，用于过滤
  watch: {  
    filterText(val) {
      this.$refs.tree2.filter(val);
    },
  },
  methods: {
    //1.获取课程列表数据
    getAllSubjectList() {
      subject.getSubjectList().then((response) => {
        this.dataAll = response.data.list;
      });
    },
    //2.课程列表导出
    exportSubject(){
      //直接调用接口地址实现导出
      window.location.href='http://localhost:8001/eduservice/subject/exportSubject'
    },
    //前端过滤不区分大小写
    filterNode(value, data) {
      if (!value) return true;
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
    }
  }
};
</script>
